<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/details/details.css" />
	</head>

	<body>
		<div id="details" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">商品详情</h1>
				<span class="mui-pull-right collect" @tap="shareSystem"></span>
			</header>
			<div class="mui-content">
				<div id="slidersliders" class="mui-slider">
					<div class="mui-slider-group">
						<div class="mui-slider-item" v-for="(sliders,index) in sliders">
							<a href="#">
								<img src="../../images/noimg.jpg" data-preview-src="" data-preview-group="-2" v-lazy="imgCommonUrl+ sliders.filePath">
							</a>
						</div>
						<div class="mui-slider-item">
							<a href="#">
								<img data-preview-src="" data-preview-group="-2" src="../../images/noimg.jpg" v-lazy="imgCommonUrl + footerSliders.filePath">
							</a>
						</div>
					</div>
					<div class="page">
						{{num +'/'+ (sliders.length+1)}}
					</div>
				</div>

				<div class="shop_details">
					<div>{{prod.name}}</div>
					<!--<div class="remarks">【官方活动 限时抢购】20个起拍 满50个包邮</div>-->
					<div>
						<div class="sum">
							<span>价格：</span>
							<div>
								<!--<span class="size">￥</span>1.1-
							<span class="size">￥</span>2.5-->
								<span class="size">￥</span>{{prod.cash}}
							</div>
						</div>
						<div class="sum" v-show="prod.buyTime">
							销量：{{prod.buyTime}}
						</div>
					</div>
				</div>
				<div>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell" @tap="standard">
							<div class="spec mui-navigate-right">
								<div>选择规格：</div>
								<span v-if="checkSpec.num>0">{{checkSpec.cn_properties}}</span>
								<span v-else>请选择商品 规格</span>
							</div>
						</li>

					</ul>
					<div class="spot">
						<div class="spot_img">
							<img v-lazy="imgCommonUrl + shopDetail.shopPic">
						</div>
						<div class="spot_text">{{shopDetail.siteName}}</div>
					</div>
					<div class="spot_button">
						<div @tap="goshop"><button type="button" class="mui-btn">进入店铺</button></div>
						<div @tap="serviceCenter"><button type="button" class="mui-btn">点击咨询</button></div>
					</div>
				</div>

				<div id="slider" class="mui-slider">
					<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<a class="mui-control-item mui-active" href="#item1mobile">
							图文详情
						</a>
						<a class="mui-control-item" href="#item2mobile">
							参数
						</a>
						<a class="mui-control-item" href="#item3mobile">
							评价
						</a>
					</div>
					<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
					<div class="mui-slider-group">
						<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
							<div id="scroll1" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<!--<div class="details_text">
										<div>高韧性材料，即使折弯至锐角也不会折断，高透明度做工精细，各关节可灵活转动，轻松调节角度和倾斜度，不易折断。</div>
										<div>相对于普通货架夹超高的折断损坏率，此款更节省促销成本，使用更省心，更轻松。</div>
										<div>
											用法：配合一个POP展示画面，或印上你要展示标语，或夹一个小、中、大号爆炸贴，即成为卖场亮眼的展示物品，让卖场买卖气氛提升。高韧性材料，即使折弯至锐角也不会折断，高透明度做工精细，各关节可灵活转动，轻松调节角度和倾斜度，不易折断。
										</div>
									</div>
									<div class="details_img">
										<img src="http://119.23.33.223:3004/photoserver/photoserver/photo/2018/03/09/725a6234-1bf8-4afc-99d2-73f039c26ff2.jpg" />
									</div>-->
									<!--<div class="details_img">
										<img src="http://119.23.33.223:3004/photoserver/photoserver/photo/2018/03/09/725a6234-1bf8-4afc-99d2-73f039c26ff2.jpg" />
									</div>-->
									<div v-html="prod.contentM" class="details_img"></div>
								</div>
							</div>
						</div>
						<div id="item2mobile" class="mui-slider-item mui-control-content">
							<div id="scroll2" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<!--<div class="mui-loading">
										<div class="mui-spinner">
										</div>
									</div>-->
									<div v-for="params in prodParams">
										<div class="details_title">{{params.groupName}}</div>
										<table class="details_table">
											<tr v-for="param in params.params">
												<td>{{param.paramName}}</td>
												<td>{{param.paramValueName}}</td>
											</tr>
										</table>
									</div>

								</div>
							</div>

						</div>
						<div id="item3mobile" class="mui-slider-item mui-control-content ">
							<div id="scroll3" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<!--<div class="mui-loading">
										<div class="mui-spinner">
										</div>
									</div>-->
									<div class="shop_comment">
										<div :class="{'check':check==1}" @tap="commentCheck(1,prodCommCategory.total)">
											<div>全部评价</div>
											<div>（{{prodCommCategory.total}}）</div>
										</div>
										<div :class="{'check':check==2}" @tap="commentCheck(2,prodCommCategory.high)">
											<div>好评</div>
											<div>{{prodCommCategory.high}}</div>
										</div>
										<div :class="{'check':check==3}" @tap="commentCheck(3,prodCommCategory.medium)">
											<div>中评</div>
											<div>{{prodCommCategory.medium}}</div>
										</div>
										<div :class="{'check':check==4}" @tap="commentCheck(4,prodCommCategory.low)">
											<div>差评</div>
											<div>{{prodCommCategory.low}}</div>
										</div>
										<div :class="{'check':check==5}" @tap="commentCheck(5,prodCommCategory.photo)">
											<div>有图</div>
											<div>{{prodCommCategory.photo}}</div>
										</div>
									</div>
									<!--<div class="shop_comment_main">
										<div class="shop_comment_list">
											<div class="comment_userData">
												<div class="comment_userhead"><img src="https://img.alicdn.com/bao/uploaded/i1/0/TB2eOGacfiSBuNkSnhJXXbDcpXa_!!0-rate.jpg_170x120Q50s50.jpg_.webp" /></div>
												<div class="comment_userName">
													dddasda
												</div>
											</div>
											<div class="comment_text">
												高韧性材料，即使折弯至锐角也不会折断，高透明度做工精细，各关节可灵活转动，轻松调节角度和倾斜度，不易折断。 相对于普通货架夹超高的折断损坏率，此款更节省促销成本，使用更省心，更轻松。 用法：配合一个POP展示画面，或印上你要展示标语，或夹一个小、中、大号爆炸贴，即成为卖场亮眼的展示物品，让卖场买卖气氛提升。
											</div>
											<div class="comment_updataImg">
												<div><img src="https://img.alicdn.com/bao/uploaded/i1/0/TB2eOGacfiSBuNkSnhJXXbDcpXa_!!0-rate.jpg_170x120Q50s50.jpg_.webp" /></div>
												<div><img src="https://img.alicdn.com/bao/uploaded/i1/0/TB2eOGacfiSBuNkSnhJXXbDcpXa_!!0-rate.jpg_170x120Q50s50.jpg_.webp" /></div>
												<div><img src="https://img.alicdn.com/bao/uploaded/i1/0/TB2eOGacfiSBuNkSnhJXXbDcpXa_!!0-rate.jpg_170x120Q50s50.jpg_.webp" /></div>
												<div><img src="https://img.alicdn.com/bao/uploaded/i1/0/TB2eOGacfiSBuNkSnhJXXbDcpXa_!!0-rate.jpg_170x120Q50s50.jpg_.webp" /></div>
												<div><img src="https://img.alicdn.com/bao/uploaded/i1/0/TB2eOGacfiSBuNkSnhJXXbDcpXa_!!0-rate.jpg_170x120Q50s50.jpg_.webp" /></div>
												<div><img src="https://img.alicdn.com/bao/uploaded/i1/0/TB2eOGacfiSBuNkSnhJXXbDcpXa_!!0-rate.jpg_170x120Q50s50.jpg_.webp" /></div>
												<div><img src="https://img.alicdn.com/bao/uploaded/i1/0/TB2eOGacfiSBuNkSnhJXXbDcpXa_!!0-rate.jpg_170x120Q50s50.jpg_.webp" /></div>
												<div><img src="https://img.alicdn.com/bao/uploaded/i1/0/TB2eOGacfiSBuNkSnhJXXbDcpXa_!!0-rate.jpg_170x120Q50s50.jpg_.webp" /></div>
												<div><img src="https://img.alicdn.com/bao/uploaded/i1/0/TB2eOGacfiSBuNkSnhJXXbDcpXa_!!0-rate.jpg_170x120Q50s50.jpg_.webp" /></div>
											</div>
											<div class="comment_footer">
												<div>一周前</div>
												<div>
													<div>100</div>
													<div>200</div>
												</div>
											</div>
										</div>
									</div>-->

									<div class="shop_comment_main">
										<div class="shop_comment_list" v-for="(commintMain,index) in commintMain">
											<div class="comment_userData">
												<div class="comment_userhead"><img src="../../images/noimg.jpg" v-lazy="imgCommonUrl + commintMain.headImg" /></div>
												<div class="comment_userName">
													{{commintMain.nickName}}
												</div>
											</div>
											<div class="comment_text">
												{{commintMain.content}}
											</div>
											<div class="comment_updataImg">
												<div v-for="photo in commintMain.photosImg"><img data-preview-src="" :data-preview-group="index" v-lazy="photo" /></div>
											</div>
											<div class="comment_footer">
												<div>{{commintMain.buyTime}}</div>
												<div @tap='usefulCounts(commintMain)'>
													<!--<div>100</div>-->
													<div>{{commintMain.usefulCounts}}</div>
												</div>
											</div>
										</div>
									</div>

									<div v-show="noData&&!commentSwith " style="text-align: center;line-height:30px;">
										暂无数据
									</div>
									<div class="mui-loading" :style="{opacity : commentSwith? 1 : 0}">
										<div class="mui-spinner">
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>

			</div>

			<div class="details_footer">
				<div class="details_footer_left">
					<div @tap="addInterest">
						<div>
							<img src="../../images/shoucang.png" v-if="prod.existsFavorite" />
							<img src="../../images/weishouchang.png" v-else/>
						</div>
						<div v-text="prod.existsFavorite ? '已收藏':'收藏'"></div>
					</div>
					<div @tap="serviceCenter">
						<div>
							<img src="../../images/service.png" />
						</div>
						<div>客服</div>
					</div>
					<div @tap="goshoppingcar">
						<div>
							<div class="num" v-if="allCount">{{allCount}}</div>
							<img src="../../images/black_shopcar.png" />
						</div>
						<div>购物车</div>

					</div>
				</div>
				<div class="details_footer_right">
					<button type="button" class="mui-btn mui-btn-warning" @tap="addShopBuy">加入购物车</button>
					<button type="button" class="mui-btn mui-btn-danger" @tap="goConfirm">立即购买</button>
				</div>
			</div>
			<!--选择规格-->
			<!--show-->
			<div class="select" :class="{'show':showSelect}">
				<div style="position: absolute;top: 0px; bottom: 44px;width: 100%;overflow-y: scroll;">
					<div class="select_shopdata">
						<div>
							<div class="select_shopdata_img"><img data-preview-src="" data-preview-group="-1" v-lazy="imgCommonUrl+prod.pic" /></div>
							<div class="select_shopdata_msg">
								<div class="select_shopdata_text">{{prod.name}}</div>
								<div class="select_shopdata_sum">
									<!--<span class="size">￥</span>1.1--->
									<!--<span class="size">￥</span>2.5-->
									<span class="size">￥</span> {{prod.cash}}
								</div>
							</div>
						</div>
					</div>
					<div class="select_modify">
						<div>
							<div>规格</div>
							<div>单价</div>
							<div>库存</div>
							<div>数量</div>
						</div>
						<div v-for="skuDtoList in prod.skuDtoList" class="list">
							<div>{{skuDtoList.cn_properties}}</div>
							<div class="select_modify_sum">￥{{skuDtoList.cash}}</div>
							<div class="select_modify_stock">(库存：{{skuDtoList.stocks-skuDtoList.num}})</div>
							<div class="select_modify_button">
								<div class="select_modify_reduce" @tap="reduceShop(skuDtoList)"><button type="button" class="mui-btn">-</button></div>
								<div class="select_modify_num"><input type="tel" @input="inputNum(skuDtoList)" v-model="skuDtoList.num" /></div>
								<div class="select_modify_add" @tap="addShop(skuDtoList)"><button type="button" class="mui-btn">+</button></div>
							</div>
						</div>
					</div>
				</div>
				<div class="details_footer_right">
					<button type="button" class="mui-btn mui-btn-warning" @tap="addShopBuy">加入购物车</button>
					<button type="button" class="mui-btn mui-btn-danger" @tap="goConfirm">立即购买</button>
				</div>
			</div>
			
			<!--商品分享-->
			<div class="share_alert" :class="{share_alert_show:shareAlert}">
				<div class="share_title">分享给好友</div>
				<div class="share_cls">
					<div v-for="shareList in shareList" @tap="shareListCheck(shareList)">
						<div><img :src="shareList.img" /></div>
						<div>{{shareList.title}}</div>
					</div>
				</div>
			</div>
			<div class="share_mask" @tap="shareAlert = false" @touchmove.prevent></div>
			
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/mui.zoom.js"></script>
		<script src="../../js/libs/mui.previewimage.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/libs/vue-lazyload.js"></script>
		<script src="../../js/details/details.js"></script>
	</body>

</html>